<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '求职意向', navigationStyle: 'custom' },
}
</route>

<template>
  <view class="job-intention">
    <view class="fixed-bg"></view>
    <view class="job-intention__header">
      <c-title :title="title" subtitle="完善以下求职意向信息，用于为您推荐岗位"></c-title>

      <image class="img" src="@/pages-sub/static/edit-intention.png" mode="scaleToFill" />
    </view>

    <view class="job-intention__content">
      <uv-form
        ref="formRef"
        :model="formParams"
        :rules="formRules"
        labelPosition="top"
        labelWidth="auto"
      >
        <uv-form-item label="选择您心仪的工作地点" prop="currentWorkList" required>
          <c-select-picker
            :options="workOptions"
            :checkStrictly="false"
            placeholder="选择工作地点"
            optionLabel="name"
            optionValue="id"
            v-model="formParams.currentWorkList"
            @confirm="confirmWork"
          />
        </uv-form-item>
        <uv-form-item label="选择您的学历">
          <c-select-picker
            v-model="formParams.educationalBackground"
            :options="educationOptions"
            placeholder="选择学历"
            optionValue="label"
          />
        </uv-form-item>
        <uv-form-item label="选择您要找的岗位类型" prop="jobType" required>
          <c-select-picker
            :options="positionTypeOptions"
            placeholder="选择岗位类型"
            optionValue="label"
            v-model="formParams.jobType"
          />
        </uv-form-item>
        <uv-form-item label="填写您的专业">
          <c-select-input
            :text="formParams.majorName"
            placeholder="填写您的专业"
            @click="popupVisible = true"
          />
        </uv-form-item>
        <uv-form-item label="选择您偏好的企业性质" prop="enterpriseNature" required>
          <c-select-picker
            :options="enterpriseNatureOptions"
            placeholder="选择您偏好的企业性质"
            optionValue="label"
            v-model="formParams.enterpriseNature"
          />
        </uv-form-item>
      </uv-form>

      <c-button customClass="w-full mt-5" :disabled="btnDisable" @click="handleSave">保存</c-button>
    </view>

    <c-popup title="选择专业" v-model="popupVisible">
      <view class="job-intention__popup">
        <wd-search
          class="job-intention__popup__search"
          placeholder="快来精准搜索专业吧～"
          hide-cancel
          placeholder-left
          size="large"
          v-model="majorName"
          @search="getMajorList"
        />
        <scroll-view scroll-y class="job-intention__popup__scroll" :scroll-left="100">
          <view
            v-for="item in majorList"
            :key="item.id"
            :class="['job-intention__popup__cell', { active: item.name === formParams.majorName }]"
            @click="handleChooseMajor(item)"
          >
            <view class="job-intention__popup__cell--title">
              <view>{{ item.name }}</view>
              <view class="subtitle" v-if="item.parentOneName"
                >{{ item.parentOneName }}/{{ item.parentName }}</view
              >
            </view>
            <wd-icon
              name="check-circle-filled"
              size="32rpx"
              color="#FF800E"
              v-if="item.name === formParams.majorName"
            ></wd-icon>
          </view>
        </scroll-view>
      </view>
    </c-popup>
  </view>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import {
    ApiGetJobIntention,
    ApiAddJobIntention,
    ApiUpdateJobIntention,
  } from '@/service/jobIntention';
  import { ApiGetAreaTree, ApiGetDictData, ApiParentAreaByCode } from '@/service/common';
  import { ApiQueryMajorByName } from '@/service/major';
  import { AreaType, DictType } from '@/service/app/types';
  const title = ref('新增求职意向');
  const formParams = ref({
    id: undefined,
    userId: undefined,
    majorId: undefined,
    jobType: '',
    cityName: '',
    cityCode: undefined,
    majorName: '',
    educationalBackground: '',
    enterpriseNature: '',
    currentWorkList: [],
  });
  const formRules = {
    currentWorkList: [{ required: true, message: '请选择工作地点' }],
    jobType: [{ required: true, message: '请选择岗位类型' }],
    enterpriseNature: [{ required: true, message: '请选择企业性质' }],
  };
  const formRef = ref();
  const majorName = ref('');
  const majorList = ref([]);

  // 工作地点选项
  const workOptions = ref<Array<AreaType>>([]);

  // 学历选项
  const educationOptions = ref<Array<DictType>>([]);
  // 岗位类型
  const positionTypeOptions = ref<Array<DictType>>([]);
  // 企业性质
  const enterpriseNatureOptions = ref<Array<DictType>>([]);

  const popupVisible = ref(false);

  const btnDisable = computed(() => {
    return (
      !formParams.value.currentWorkList.length ||
      !formParams.value.jobType ||
      !formParams.value.enterpriseNature
    );
  });

  const getMajorList = () => {
    ApiQueryMajorByName({ name: majorName.value }).then((res) => {
      majorList.value = [{ name: '暂不选择' }, { name: '专业不限' }, ...(res.data as any)];
    });
  };

  const handleChooseMajor = (item) => {
    formParams.value.majorName = item.name == '暂不选择' ? '' : item.name;
    formParams.value.majorId = item.id || undefined;
    popupVisible.value = false;
  };

  const confirmWork = (codes: number[], labels: string[]) => {
    formParams.value.cityCode = codes[1];
    formParams.value.cityName = labels[1];
  };

  const handleSave = () => {
    if (!formParams.value.currentWorkList.length) {
      uni.showToast({
        title: '请选择工作地点',
        icon: 'none',
      });
      return;
    }
    if (!formParams.value.jobType) {
      uni.showToast({
        title: '请选择岗位类型',
        icon: 'none',
      });
      return;
    }
    if (!formParams.value.enterpriseNature) {
      uni.showToast({
        title: '请选择企业性质',
        icon: 'none',
      });
      return;
    }
    if (formParams.value.id) {
      ApiUpdateJobIntention(formParams.value).then((res) => {
        uni.showToast({
          title: '更新成功',
        });
        uni.navigateBack();
      });
    } else {
      ApiAddJobIntention(formParams.value).then((res) => {
        uni.showToast({
          title: '添加成功',
        });
        uni.navigateBack();
      });
    }
  };

  onMounted(() => {
    ApiGetAreaTree().then((res) => {
      workOptions.value = res.data as Array<AreaType>;
    });
    ApiGetDictData('educational_background').then((res) => {
      educationOptions.value = res.data as Array<DictType>;
    });
    ApiGetDictData('position_type').then((res) => {
      positionTypeOptions.value = res.data as Array<DictType>;
    });
    ApiGetDictData('enterprise_nature').then((res) => {
      enterpriseNatureOptions.value = res.data as Array<DictType>;
    });
    getMajorList();
  });
  onLoad(({ params }) => {
    if (params) {
      params = JSON.parse(params);
      if (!params.id) return;
      ApiGetJobIntention(params.id).then((res) => {
        formParams.value = res.data as any;
        ApiParentAreaByCode(formParams.value.cityCode).then((res) => {
          formParams.value.currentWorkList = [
            res.data.id as number,
            Number(formParams.value.cityCode),
          ];
        });
        formParams.value.userId = params.userId;
        title.value = '编辑求职意向';
      });
    }
  });
</script>

<style lang="scss" scoped>
  .job-intention {
    padding: 32rpx;
    .fixed-bg {
      background:
        linear-gradient(180deg, #ffe9da 0%, #fffaf8 100%),
        linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__header {
      position: relative;

      .img {
        position: absolute;
        right: -32rpx;
        top: -32rpx;
        width: 242rpx;
        height: 342rpx;
        z-index: -1;
      }
    }
    &__content {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.7) 100%),
        #ffffff;
      border-radius: 20rpx;
      border: 2rpx solid rgba(62, 70, 84, 0.05);
      padding: 20rpx 48rpx;
      margin-top: 48rpx;
    }

    &__popup {
      margin: 0 -32rpx;
      overflow: hidden;
      &__search {
        margin: 0 0 16rpx;
      }
      &__scroll {
        height: 800rpx;
      }
      &__cell {
        display: flex;
        align-items: center;
        padding: 22rpx 0;
        margin: 0 32rpx;
        border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
        &--title {
          flex: 1 0 0;
          view {
            &:first-child {
              color: #191919;
              font-size: 26rpx;
            }
            &.subtitle {
              font-size: 20rpx;
              color: rgba(0, 0, 0, 0.3);
              margin-top: 8rpx;
            }
          }
        }
        &.active {
          .job-intention__popup__cell--title {
            view,
            &.subtitle {
              color: #ff800e;
            }
          }
        }
      }
    }
  }
</style>
